<template>
  <view class="content" v-if="!$_.isEmpty(detail)">
    <view class="title_box" style="margin-left: 20rpx">
      <view class="title_line"></view>
      <view style="color: #fff">基础信息</view>
    </view>
    <view class="tips-box" style="margin-left: 20rpx">
      <view class="name_list">
        <name_box style="margin-right: 20rpx" v-for="(item, i) in detail.ziDes" :key="i" :text="item.jtz"></name_box>
        <view class="pinYin">
          <view class="box_title">拼音</view>
          <view v-for="(item, i) in detail.ziDes" :key="i" class="box_item">{{
            item.py
          }}</view>
        </view>
        <view class="pinYin">
          <view class="box_title">繁体</view>
          <view v-for="(item, i) in detail.ziDes" :key="i" class="box_item">{{
            item.zi
          }}</view>
        </view>
        <view class="pinYin">
          <view class="box_title">笔画</view>
          <view class="box_item" v-for="(item, i) in detail.ziDes" :key="i">{{
            item.bihua
          }}</view>
        </view>
        <view class="pinYin">
          <view class="box_title">五行</view>
          <view class="box_item" v-for="(item, i) in detail.ziDes" :key="i">{{
            item.wx
          }}</view>
        </view>
      </view>
    </view>
    <view class="tips-box" style="padding-top: 0; padding-bottom: 100rpx; margin-left: 20rpx">
      <view class="title_box" style="padding-left: ">
        <view class="title_line"></view>
        <view style="font-size: 44rpx">六格信息</view>
      </view>
      <view class="wuge_list" style="padding-top: 80rpx">
        <view>
          <view class="ge-info">
            <view>外格</view>
            <view class="ge-info-wuxing">
              <view>{{ detail.outge }}</view>
              <view class="ge-info-wuxing-tips">
                <text :style="{
                  color: getColorImg(detail.outgewx).color,
                }">
                  {{ detail.outgewx }}
                </text>
                <img class="wx-img" :src="getColorImg(detail.outgewx).img" alt="" />
              </view>
            </view>
            <view>{{ detail.outgejx }}</view>
          </view>
        </view>
        <view>
          <img class="ge-left-line" src="../../static/images/name/img-bottomLine2.png" alt="" />
        </view>
        <view>
          <template v-if="detail.lastname.length == 1">
            <name_box class="name-box-item" :text="''"></name_box>
            <name_box class="name-box-item" :text="detail.xingList[0].zi"></name_box>            
          </template>
          <template v-else>
            <name_box class="name-box-item" :text="detail.xingList[0].zi"></name_box>
            <name_box class="name-box-item" :text="detail.xingList[1].zi"></name_box>            
          </template>
          <name_box class="name-box-item" :text="detail.mingList[0].zi"></name_box>
          <name_box v-if="detail.firstname.length == 2" class="name-box-item" :text="detail.mingList[1].zi"></name_box>
          <name_box v-else class="name-box-item" :text="''"></name_box>
        </view>
        <view>
          <view class="ge-right">
            <img class="ge-right-img" src="../../static/images/name/img_topLine2.png" alt="" />
            <view class="ge-info">
              <view>天格</view>
              <view class="ge-info-wuxing">
                <view>{{ detail.tiange }}</view>
                <view class="ge-info-wuxing-tips">
                  <text :style="{
                    color: getColorImg(detail.tiangewx).color,
                  }">
                    {{ detail.tiangewx }}
                  </text>
                  <img class="wx-img" :src="getColorImg(detail.tiangewx).img" alt="" />
                </view>
              </view>
              <view>{{ detail.tiangejx }}</view>
            </view>
          </view>
          <view class="ge-right">
            <img class="ge-right-img" src="../../static/images/name/img_topLine2.png" alt="" />
            <view class="ge-info">
              <view>人格</view>
              <view class="ge-info-wuxing">
                <view>{{ detail.renge }}</view>
                <view class="ge-info-wuxing-tips">
                  <text :style="{
                    color: getColorImg(detail.rengewx).color,
                  }">
                    {{ detail.rengewx }}
                  </text>
                  <img class="wx-img" :src="getColorImg(detail.rengewx).img" alt="" />
                </view>
              </view>
              <view>{{ detail.rengejx }}</view>
            </view>
          </view>
          <view class="ge-right">
            <img class="ge-right-img" src="../../static/images/name/img_topLine2.png" alt="" />
            <view class="ge-info">
              <view>地格</view>
              <view class="ge-info-wuxing">
                <view>{{ detail.dige }}</view>
                <view class="ge-info-wuxing-tips">
                  <text :style="{
                    color: getColorImg(detail.digewx).color,
                  }">
                    {{ detail.digewx }}
                  </text>
                  <img class="wx-img" :src="getColorImg(detail.digewx).img" alt="" />
                </view>
              </view>
              <view>{{ detail.digejx }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="item_bottom">
        <view class="bottom-item">
          <text style="font-weight: 200">总格：</text>
          <text style="font-weight: bold; margin-left: 8rpx; font-size: 72rpx">{{
            detail.totalgedes.num
          }}</text>
          <view class="bottom_shuxing" :style="{
                color: getColorImg(detail.totalgewx).color,
                'margin-left': ' 8rpx',
              }">{{ detail.totalgewx }}</view>      
          <view class="ge-info-wuxing-tips">{{ detail.totalgejx }}</view>
        </view>
        <view class="bottom-item">
          <text style="font-weight: 200">变格：</text>
          <text style="font-weight: bold; margin-left: 8rpx; font-size: 72rpx">{{
            detail.biange
          }}</text>
          <view class="ge-info-wuxing-tips">{{ detail.biangejx }}</view>
        </view>
      </view>
    </view>

    <view class="name_analysis" style="padding-bottom: 100rpx">
      <view class="title_box" style="
          padding-bottom: 60rpx;
          justify-content: space-between;
          align-items: center;
        ">
        <view style="display: flex">
          <view class="title_line"></view>
          <view style="font-size: 60rpx; color: #fff">三才配置</view>
        </view>
      </view>

      <view class="name_num">
        <img class="img_bagua" src="../../static/images/name/bgc-bagua.png" alt="" />
        <view class="num_left">
          <view class="num_title">{{ detail.sancai.title }}</view>
          <view class="num_title">{{ detail.sancai.sancaiLiuJx }}</view>
        </view>
      </view>

      <view class="tips-box" style="padding-top: 0; padding-bottom: 100rpx; margin-left: 20rpx">
        <view class="title_box" style="padding-left: ">
          <view class="title_line"></view>
          <view style="font-size: 44rpx">三才配置基础解读</view>
        </view>
        <view class="name_explain" v-html="detail.sancai.sancaiLiuResult"></view>
        <view class="name_explain" >(备注：三才配置仅为基础吉凶判断，并非姓名好坏，还要结合六格数理吉凶与个人八字综合判断）</view>
      </view>
    </view>
  </view>
</template>

<script>
import Name_box from "./components/name_box.vue";
import { getNameInfo } from "@/http/api.js";
export default {
  components: {
    name_box: Name_box,
  },
  data() {
    return {
      info: {},
      detail: {},
      width: 276,
    };
  },

  computed: {
    getColorImg() {
      return function (wx) {
        if (wx == "木") {
          return {
            img: "../../static/images/bazi/fortune/wood.png",
            color: "#4D9B5F",
          };
        }
        if (wx == "火") {
          return {
            img: "../../static/images/bazi/fortune/fire.png",
            color: "#E45B5B",
          };
        }
        if (wx == "土") {
          return {
            img: "../../static/images/bazi/fortune/earth.png",
            color: "#D9A05B",
          };
        }
        if (wx == "金") {
          return {
            img: "../../static/images/bazi/fortune/metal.png",
            color: "#D9A05B",
          };
        }
        if (wx == "水") {
          return {
            img: "../../static/images/bazi/fortune/water.png",
            color: "#4D9B5F",
          };
        }
      };
    },
  },
  methods: {
    getNameDetail() {
      wx.showLoading();
      let obj = {
        birthday: "1996-12-12 00:00:00",
        firstname: this.info.lastName,
        lastname: this.info.firstName,
        sex: 1,
        type: this.info.type,
      };
      getNameInfo({
        ...obj,
      }).then((res) => {
        const { data, code } = res;
        if (code == 200) {
          let obj = {
            bihua: "",
            wx: "",
            zi: "",
            py: "",
          };
          let list = this.$_.cloneDeep(data.ziDes);
          data.xingList = list.splice(0, data.lastname.length);
          data.mingList = list;

          if (data.firstname.length == 1) {
            data.mingList.push(obj);
          }
          // if (data.lastname.length == 1) {
          //   //姓为复姓时
          //   data.xingList.unshift(obj);
          // } else {
          //   this.width = 170;
          // }

          if (data.firstname.length == 1) {
            data.ziDes.push(obj);
          }
          if (data.lastname.length == 1 && data.firstname.length < 3) {
            //姓为复姓时
            data.ziDes.unshift(obj);
          }

          this.detail = data;
          console.log(data);

          wx.hideLoading();
        } else {
          wx.showToast({
            title: "获取信息失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
  },
  mounted() {
    this.getNameDetail();
  },
  onLoad(v) {
    this.info = JSON.parse(v.info);
  },
};
</script>

<style lang="scss">
.content {
  height: 100%;
  width: 100%;
  //   padding: 0 20rpx;
  background: linear-gradient(180deg, #a88e71 0%, rgba(255, 250, 241, 0) 98%);
}

.tips-box {
  width: calc(100% - 40rpx);
  background: #fff;
  
  padding: 40rpx 0;
  margin-top: 40rpx;
}

.title_box {
  padding-top: 40rpx;
  display: flex;
  font-size: 60rpx;
  color: #492310;
}

.title_line {
  width: 14rpx;
  height: 46rpx;
  background: #492310;
  margin-right: 12rpx;
}

.name-box-item {
  margin: 0 40rpx 20rpx;
}

.name_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pinYin {
  width: 100%;
  margin-top: 40rpx;
  background: #f6f6f6;
  height: 74rpx;
  display: flex;
  justify-content: start;
  align-items: center;
}

.box_title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 0 64rpx 0 88rpx;
  color: #3d3d3d;
}

.box_item {
  font-size: 28rpx;
  font-weight: bold;
  color: #3d3d3d;
  width: 88rpx;
  margin-left: 12rpx;
}

.item_detail {
  position: relative;
  margin-right: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item_wuxing {
  position: absolute;
  text-align: center;
  top: -112rpx;
  left: 230rpx;

  img {
    transform: rotate(90deg);
    margin-top: 8rpx;
    width: 130rpx;
    height: 42rpx;
  }
}

.item_bottom {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #dccdbe;
  font-size: 48rpx;
  padding: 40rpx 0;
  background-image: url("../../static/images/name/bgc-taiji.png");
  background-size: contain 100%;
  background-position: 105%;
  background-repeat: no-repeat;
}
.bottom-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 0;
}

.bottom_shuxing {
  background: white;
  border-radius: 4rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 8rpx;
  margin-left: 4rpx;
}

.name_analysis {
  background: linear-gradient(180deg, #a88e71 0%, rgba(255, 250, 241, 0) 98%);
  width: calc(100% - 40rpx);
  margin-left: 20rpx;
}

.num_left {
  display: flex;
  flex-direction: row;
  margin-left: 20rpx;
  color: #3d3d3d;
}
.num_title {
  font-size: 44rpx;
  color: #492310;
}

.name_num {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 60rpx 0  ;
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  overflow: hidden;
  
}

.img_bagua {
  position: absolute;
  left: 310rpx;
  top: -180rpx;
  width: 640rpx;
  height: 600rpx;
  transform: rotate(42);
  opacity: 1;
  scale: 1.3;
}

.name_explain {
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-top: 28rpx;
  color: #000000;
  margin-bottom: 40rpx;
}

.wuge_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ge-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20rpx 10rpx;
}

.ge-info-wuxing, .ge-info-wuxing-tips {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ge-info-wuxing-tips {
  margin-left: 8rpx;
}

.wx-img {
  width: 30rpx;
  height: 20rpx;
}

.ge-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ge-right-img {
  height: 130rpx;
  width: 42rpx;
}

</style>